import React, { useEffect } from 'react'
import { connect } from 'react-redux'
import { actionCreators } from "./store/index";
import {Content} from './style'
import Scroll from '@/components/common/Scroll'
import Slider from '@/components/slider'
import RecommendList from '@/components/list/'
import { forceCheck } from 'react-lazyload';
import {EnterLoading} from '@/pages/Singers/style'
import Loading from '@/components/common/loading-v2/index'

function Recommend(props) {  
    const {bannerList,songsCount,recommendList,enterLoading } = props
    const {getBannerDataDispatch,getRecommendListDispatch } = props
    // console.log(banners)
    // let songsCount = 2; 
    // 这个页面不在具备数据能力  
    useEffect(() => {
      getBannerDataDispatch();
      getRecommendListDispatch();
    },[])
    return (
      <Content play={songsCount}>
        <Scroll className="list" onScroll={forceCheck}>
        <div>
          <Slider bannerList={bannerList}></Slider>
          <RecommendList recommendList={recommendList}/>
        </div>
        </Scroll>
        {enterLoading?<EnterLoading>
        <Loading></Loading></EnterLoading>:null}
      </Content>
    )
  }
  // state 状态树  
  const mapStateToProps = (state) => {
    console.log(state)
      return {
        // 对象
          enterLoading:state.recommend.enterLoading,
          bannerList:state.recommend.bannerList,
          recommendList:state.recommend.recommendList,
          songsCount:state.player.playList.length      
      }
  }
  
  const mapDispatchToProps =( dispatch ) =>{
    return {
        getBannerDataDispatch() {
          dispatch(actionCreators.getBannerList())
        },
        getRecommendListDispatch() {
          dispatch(actionCreators.getRecommendList())
        }
  
    }
  }
  // UI组件
  // 第一个参数是读状态，把状态从状态树中读取，第二个参数是对状态进行修改(操作状态的方法)
  export default connect(mapStateToProps,mapDispatchToProps)(Recommend)
